<template>
  <div class="add_hospital_page">
    <div class="nav_bar">
      <div class="back" @click="goBack">
        <span class="el-icon-arrow-left"></span>
        <span>返回</span>
      </div>

      <div class="top_menus">
        <div
          class="menu_cell"
          :class="step == item.id ? 'menu_cell_active' : ''"
          v-for="(item, index) in menus"
          :key="index"
          @click="menuEvent(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <!-- 第一步 基础信息 开始 -->
    <div class="content" v-show="step == 1">
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="addFormRules"
        class="add_form"
        size="small"
        :label-width="labelWidth"
      >
        <el-form-item label="案例类型：" class="long_form_item" prop="caseType">
          <div class="label_list">
            <el-tag
              :type="addForm.caseType == item.text ? 'primary' : 'info'"
              :effect="addForm.caseType == item.text ? 'dark' : 'plain'"
              class="label_cell"
              v-for="(item, index) in CASE_MENUS"
              :key="index"
              @click="chooseTag(item, 'caseType')"
              >{{ item.text }}</el-tag
            >
          </div>
        </el-form-item>
        <el-form-item
          label="牙齿情况："
          class="long_form_item"
          prop="toothConditions"
        >
          <div class="label_list">
            <el-tag
              :type="getChecked(item, 'toothConditions') ? 'primary' : 'info'"
              :effect="getChecked(item, 'toothConditions') ? 'dark' : 'plain'"
              class="label_cell"
              v-for="(item, index) in teethList"
              :key="index"
              @click="labelSelection(item, 'toothConditions')"
              >{{ item.text }}</el-tag
            >
          </div>
        </el-form-item>
        <el-form-item
          label="治疗方案："
          class="long_form_item"
          prop="treatmentMethod"
        >
          <div class="label_list">
            <el-tag
              :type="getChecked(item, 'treatmentMethod') ? 'primary' : 'info'"
              :effect="getChecked(item, 'treatmentMethod') ? 'dark' : 'plain'"
              class="label_cell"
              v-for="(item, index) in treatmentList"
              :key="index"
              @click="labelSelection(item, 'treatmentMethod')"
              >{{ item.text }}</el-tag
            >
          </div>
        </el-form-item>
        <el-form-item
          label="使用材料："
          class="long_form_item"
          prop="materialsUsed"
        >
          <div class="label_list">
            <el-tag
              :type="addForm.materialsUsed === item.text ? 'primary' : 'info'"
              :effect="addForm.materialsUsed === item.text ? 'dark' : 'plain'"
              class="label_cell"
              v-for="(item, index) in materialList"
              :key="index"
              @click="chooseTag(item, 'materialsUsed')"
              >{{ item.text }}</el-tag
            >
          </div>
        </el-form-item>
        <el-form-item
          label="治疗周期："
          class="long_form_item"
          prop="treatmentCycle"
        >
          <div class="label_list">
            <el-tag
              :type="addForm.treatmentCycle === item.text ? 'primary' : 'info'"
              :effect="addForm.treatmentCycle === item.text ? 'dark' : 'plain'"
              class="label_cell"
              v-for="(item, index) in CLUE_CYCLE_OPTIONS"
              :key="index"
              @click="chooseTag(item, 'treatmentCycle')"
              >{{ item.text }}</el-tag
            >
          </div>
        </el-form-item>
        <el-form-item label="性别：" class="long_form_item" prop="gender">
          <div class="label_list">
            <el-tag
              :type="addForm.gender === item.text ? 'primary' : 'info'"
              :effect="addForm.gender === item.text ? 'dark' : 'plain'"
              class="label_cell"
              v-for="(item, index) in GENDER_OPTIONS"
              :key="index"
              @click="chooseTag(item, 'gender')"
              >{{ item.text }}</el-tag
            >
          </div>
        </el-form-item>
        <el-form-item label="年龄：" class="long_form_item" prop="age">
          <div class="label_list">
            <el-tag
              :type="addForm.age === item.text ? 'primary' : 'info'"
              :effect="addForm.age === item.text ? 'dark' : 'plain'"
              class="label_cell"
              v-for="(item, index) in AGE_OPTIONS"
              :key="index"
              @click="chooseTag(item, 'age')"
              >{{ item.text }}</el-tag
            >
          </div>
        </el-form-item>
        <el-form-item
          label="案例标题："
          class="long_form_item"
          prop="caseTitle"
        >
          <el-input v-model.trim="addForm.caseTitle"></el-input>
        </el-form-item>
        <el-form-item
          label="案例图片："
          class="long_form_item"
          prop="casePictures"
        >
          <ImageUpload
            v-model="addForm.casePictures"
            :limit="5"
            @change="onChange"
          ></ImageUpload>
        </el-form-item>
        <el-form-item label="案例内容：" class="long_form_item">
          <!-- <el-input type="textarea" v-model="addForm.caseContent" class="a_area" rows="3" resize="none"></el-input> -->
          <WangEditor v-model="addForm.caseContent" class="a_area"></WangEditor>
        </el-form-item>
        <el-form-item
          label="关联医生："
          class="long_form_item"
          prop="linkDoctorId"
        >
          <DoctorSelect v-model="addForm.linkDoctorId"></DoctorSelect>
          <!-- <el-select v-model="addForm.linkDoctorId">
            <el-option label="111" value="1"></el-option>
            <el-option label="222" value="2"></el-option>
            <el-option label="333" value="3"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="nextStep">保存，下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第一步 基础信息 end -->

    <!-- 第二步 平台运营 开始 -->
    <div class="content" v-show="step == 2">
      <el-form
        :model="addForm"
        ref="secondForm"
        :rules="secondFormRules"
        size="small"
        :label-width="labelWidth"
      >
        <el-form-item label="上架状态：" class="" prop="onShelf">
          <el-radio-group v-model="addForm.onShelf">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架可见</el-radio>
            <el-radio :label="0">下架不可见</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否首页：" class="" prop="homePageShow">
          <el-radio-group v-model="addForm.homePageShow">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="初始阅读数：" class="" prop="initReadCnt">
          <el-input
            v-model.trim="addForm.initReadCnt"
            class="a_input"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序时间：" class="" prop="orderTime">
          <el-date-picker
            v-model="addForm.orderTime"
            type="date"
            class="a_input"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="seo标题：" class="" prop="seoTitle">
          <el-input v-model.trim="addForm.seoTitle" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="seo关键词：" class="" prop="seoKeywords">
          <el-input
            type="textarea"
            v-model.trim="addForm.seoKeywords"
            class="a_area"
            rows="3"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="seo描述：" class="" prop="seoDescription">
          <el-input
            type="textarea"
            v-model.trim="addForm.seoDescription"
            class="a_area"
            rows="3"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="" class="long_form_item">
          <el-button type="primary" :loading="loading" @click="saveInfo"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 第二步 平台运营 end -->
  </div>
</template>
<script>
import ImageUpload from "@/components/upload/index.vue";
import WangEditor from "@/components/wangEditor/index.vue";
import {
  TEETH_CONDITION,
  TREATMENT_OPTIONS,
  MATERIAL_OPTIONS,
  CLUE_CYCLE_OPTIONS,
  GENDER_OPTIONS,
  AGE_OPTIONS,
  CASE_MENUS,
  MATERIAL_LIST_OPTIONS,
  TEETH_LIST_CONDITION,
  TREATMENT_LIST_OPTIONS,
} from "@/common/constants";
import {
  BASEURL,
  ADD_CASE_INFO,
  EDIT_CASE_INFO,
  GET_CASE_INFO,
} from "@/http/information";
import { deepClone, showToast } from "@/common/util";
import DoctorSelect from "@/components/select/doctor";
export default {
  components: {
    ImageUpload,
    WangEditor,
    DoctorSelect,
  },
  data() {
    return {
      menus: [
        { name: "基础信息", id: 1 },
        { name: "平台运营", id: 2 },
      ],
      step: 1,
      caseTypeId: 1,
      addForm: {},
      labelWidth: "120px",
      CASE_MENUS,
      TEETH_CONDITION,
      TREATMENT_OPTIONS,
      MATERIAL_OPTIONS,
      CLUE_CYCLE_OPTIONS,
      GENDER_OPTIONS,
      AGE_OPTIONS,
      teethList: [],
      treatmentList: [],
      materialList: [],
      addFormRules: {
        caseType: [
          { required: true, message: "请选择案例类型", trigger: "change" },
        ],
        toothConditions: [
          { required: true, message: "请选择牙齿情况", trigger: "change" },
        ],
        treatmentMethod: [
          { required: true, message: "请选择治疗方案", trigger: "change" },
        ],
        caseTitle: [
          { required: true, message: "请输入案例标题", trigger: "blur" },
        ],
        casePictures: [
          { required: true, message: "请上传案例图片", trigger: "change" },
        ],
        linkDoctorId: [
          { required: true, message: "请选择关联医生", trigger: "change" },
        ],
      },
      secondFormRules: {
        onShelf: [
          { required: true, message: "请选择上架状态", trigger: "change" },
        ],
        homePageShow: [
          { required: true, message: "请选择是否首页", trigger: "change" },
        ],
        initReadCnt: [
          { required: true, message: "请输入初始阅读数", trigger: "blur" },
        ],
        orderTime: [
          { required: true, message: "请输入排序时间", trigger: "blur" },
        ],
        seoTitle: [
          { required: true, message: "请输入seo标题", trigger: "blur" },
        ],
        seoKeywords: [
          { required: true, message: "请输入seo关键词", trigger: "blur" },
        ],
        seoDescription: [
          { required: true, message: "请输入seo描述", trigger: "blur" },
        ],
      },
      loading: false,
    };
  },
  created() {
    let query = this.$route.query;
    if (query.id) {
      this.getInfo(query.id);
    }
    this.initList();
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      let _this = this;
      //this.step = row.id;
      if (_this.step == 1) {
        _this.$refs.addForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          _this.step = row.id;
        });
        return false;
      }
      _this.step = row.id;
    },

    // 返回上一页
    goBack() {
      this.$router.go("-1");
    },

    // 选择标签
    chooseTag(row, id) {
      let o = this.addForm;
      this.$set(this.addForm, id, row.text);
      if (id == "caseType") {
        this.caseTypeId = row.value;
        if (o.toothConditions) {
          delete o.toothConditions;
        }
        if (o.treatmentMethod) {
          delete o.treatmentMethod;
        }
        if (o.materialsUsed) {
          delete o.materialsUsed;
        }
        console.log(row.value);
        this.initList();
      }
      this.$refs.addForm.validateField(id);
    },

    // 监听文件上传
    onChange() {
      this.$refs.addForm.validateField("casePictures");
    },

    // 下一步
    nextStep() {
      let _this = this;
      if (_this.step == 1) {
        _this.$refs.addForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          _this.step = 2;
        });
        return false;
      }
      _this.step += 1;
    },

    // 获取百科详情
    getInfo(id) {
      let oParams = {};
      oParams.id = id;
      GET_CASE_INFO(oParams).then((res) => {
        let obj = res.data || {};

        // 图片
        if (obj.casePictures && obj.casePictures.length) {
          let arr = [];
          obj.casePictures.map((k) => {
            arr.push({
              name: k,
              url: BASEURL + k,
              path: k,
            });
          });
          obj.casePictures = arr;
        }

        if (obj.toothConditions) {
          obj.toothConditions = obj.toothConditions.split(",");
        } else {
          obj.toothConditions = [];
        }

        if (obj.treatmentMethod) {
          obj.treatmentMethod = obj.treatmentMethod.split(",");
        } else {
          obj.treatmentMethod = [];
        }

        delete obj.createdDate;
        this.addForm = obj;
        console.log(obj.caseType);
        let list = CASE_MENUS || [];
        let o = list.find((k) => k.text == obj.caseType);
        console.log(o)
        this.caseTypeId = o ? o.value : 1;
        this.initList();
      });
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.addForm);

      // 案例图片
      if (o.casePictures && o.casePictures.length) {
        let arr = [];
        o.casePictures.map((k) => {
          arr.push(k.path);
        });
        o.casePictures = arr;
      }
      o.toothConditions = o.toothConditions.toString();
      o.treatmentMethod = o.treatmentMethod.toString();

      delete o.linkDoctor;

      return o;
    },

    // 保存信息
    saveInfo() {
      let _this = this;
      let query = _this.$route.query;
      this.$refs.secondForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = _this.getParams();
        console.log(oParams);
        _this.loading = true;

        // 编辑
        if (query.id) {
          oParams.id = query.id;
          EDIT_CASE_INFO(oParams).then((res) => {
            _this.loading = false;
            if (res.code == 200) {
              showToast({
                message: "编辑成功",
                type: "success",
              });
              _this.goBack();
            }
          });
          return false;
        }

        // 新增
        ADD_CASE_INFO(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "新增成功",
              type: "success",
            });
            _this.goBack();
          }
        });
      });
    },

    // 初始化选项
    initList() {
      let id = this.caseTypeId || 1;
      this.teethList = TEETH_LIST_CONDITION[id];
      this.materialList = MATERIAL_LIST_OPTIONS[id];
      this.treatmentList = TREATMENT_LIST_OPTIONS[id];
    },

    // 判断是否选中
    getChecked(row, id) {
      let list = this.addForm[id] || [];
      let idx = list.findIndex((k) => k == row.text);
      if (idx >= 0) {
        return true;
      }
      return false;
    },

    // 标签多选
    labelSelection(row, id) {
      let list = this.addForm[id] || [];
      let idx = list.findIndex((k) => k == row.text);
      if (idx >= 0) {
        list = list.filter((k) => k != row.text);
      } else {
        list.push(row.text);
      }
      this.$set(this.addForm, id, list);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/addHospital.scss";
</style>